<template>
	<view>
		<view class="head" id='head'>
			<view class="status-bar"></view>
			<view class="tab-bar">
				<view class="tabsBox">
					<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="changeFn"
						active-color='#333333' inactive-color='#999999' bar-width='60' bar-height='4'
						:bar-style='barStyle'></u-tabs>
				</view>
				<view class="issue" v-if="current==0" @click="navTo('./setDynamic/setDynamic')">
					<image src="../../static/imgs/fabudt.png" mode=""></image>
				</view>
				<view class="issue" v-if="current==1" @click="navTo('./addFriend/addFriend')">
					<image src="../../static/imgs/tianjiahy.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 发现 -->
		<view class="content" v-if="current==0">
			<view class="tabBox" :style="{'paddingTop':paddingTop+'px'}">
				<view class="tab">
					<u-tabs :list="dynamicTab" :show-bar='false' bg-color='#F2F2F7' :is-scroll="false"
						:current="dynamicCur" @change="dynaChange" active-color='#333333' inactive-color='#999999'
						bar-width='60' bar-height='4'>
					</u-tabs>
				</view>
			</view>
			<!-- 推荐 -->
			<view class="container" v-show="dynamicCur == 0">
				<u-waterfall v-model="dynamicRecom" ref="tjWaterfall">
					<template v-slot:left="{leftList}">
						<view class="dynamicRecom-li" v-for="(item, index) in leftList" :key="index">
							<image v-if="item.images.length" :src="item.images[0]" mode="aspectFill"
								@click="navTo('./graDetail/graDetail?id='+item.id)"></image>
							<view class="video" v-if="item.videos.length"
								@click="navTo('./veoDetail/veoDetail?id='+item.id)">
								<image class="poster" :src="item.cover" mode=""></image>
								<image class="play" src="../../static/imgs/zantingbf.png" mode=""></image>
							</view>
							<view class="title" v-if="item.content">
								{{item.content}}
							</view>
							<view class="userBox">
								<view class="left">
									<image :src="item.head_pic" mode=""></image>
									<text>{{item.nickname}}</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28" v-if='item.is_like ==1'>
									</u-icon>
									<u-icon name="heart" color="#666666" size="28" v-else></u-icon>
									<text>{{item.like_num}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="dynamicRecom-li" v-for="(item, index) in rightList" :key="index">
							<image v-if="item.images.length" :src="item.images[0]" mode="aspectFill"
								@click="navTo('./graDetail/graDetail?id='+item.id)"></image>
							<view class="video" v-if="item.videos.length"
								@click="navTo('./veoDetail/veoDetail?id='+item.id)" s>
								<image class="poster" :src="item.cover" mode=""></image>
								<image class="play" src="../../static/imgs/zantingbf.png" mode=""></image>
							</view>
							<view class="title" v-if="item.content">
								{{item.content}}
							</view>
							<view class="userBox">
								<view class="left">
									<image :src="item.head_pic" mode=""></image>
									<text>{{item.nickname}}</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28" v-if='item.is_like ==1'>
									</u-icon>
									<u-icon name="heart" color="#666666" size="28" v-else></u-icon>
									<text>{{item.like_num}}</text>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<!-- 视频 -->
			<view class="container" v-show="dynamicCur == 1">
				<u-waterfall v-model="dynamicVideo" ref="spWaterfall">
					<template v-slot:left="{leftList}">
						<view class="dynamicRecom-li" v-for="(item, index) in leftList" :key="index"
							@click="navTo('./detail/detail')">
							<view class="video" v-if="item.videos.length">
								<image class="poster" :src="item.cover" mode=""></image>
								<image class="play" src="../../static/imgs/zantingbf.png" mode=""></image>
							</view>
							<view class="title">
								{{item.content}}
							</view>
							<view class="userBox">
								<view class="left">
									<image :src="item.head_pic" mode=""></image>
									<text>{{item.nickname}}</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28" v-if='item.is_like ==1'>
									</u-icon>
									<u-icon name="heart" color="#666666" size="28" v-else></u-icon>
									<text>{{item.like_num}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="dynamicRecom-li" v-for="(item, index) in rightList" :key="index"
							@click="navTo('./detail/detail')">
							<view class="video" v-if="item.videos.length">
								<image class="poster" :src="item.cover" mode=""></image>
								<image class="play" src="../../static/imgs/zantingbf.png" mode=""></image>
							</view>
							<view class="title">
								{{item.content}}
							</view>
							<view class="userBox">
								<view class="left">
									<image :src="item.head_pic" mode=""></image>
									<text>{{item.nickname}}</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28" v-if='item.is_like ==1'>
									</u-icon>
									<u-icon name="heart" color="#666666" size="28" v-else></u-icon>
									<text>{{item.like_num}}</text>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<!-- 图文 -->
			<view class="container" v-show="dynamicCur == 2">
				<u-waterfall v-model="dynamicImg" ref="twWaterfall">
					<template v-slot:left="{leftList}">
						<view class="dynamicRecom-li" v-for="(item, index) in leftList" :key="index"
							@click="navTo('./detail/detail')">
							<image :src="item.images[0]" mode=""></image>
							<view class="title">
								{{item.content}}
							</view>
							<view class="userBox">
								<view class="left">
									<image :src="item.head_pic" mode=""></image>
									<text>{{item.nickname}}</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28" v-if='item.is_like ==1'>
									</u-icon>
									<u-icon name="heart" color="#666666" size="28" v-else></u-icon>
									<text>{{item.like_num}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="dynamicRecom-li" v-for="(item, index) in rightList" :key="index"
							@click="navTo('./detail/detail')">
							<image :src="item.images[0]" mode=""></image>
							<view class="title">
								{{item.content}}
							</view>
							<view class="userBox">
								<view class="left">
									<image :src="item.head_pic" mode=""></image>
									<text>{{item.nickname}}</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28" v-if='item.is_like ==1'>
									</u-icon>
									<u-icon name="heart" color="#666666" size="28" v-else></u-icon>
									<text>{{item.like_num}}</text>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<!-- 我的关注 -->
			<view class="container" v-show="dynamicCur == 3">
				<view class="searchBox">
					<input type="text" placeholder="搜索已关注的人" />
				</view>
				<view class="attent">
					<view class="lable">
						正在关注
					</view>
					<view class="attent-ul">
						<view class="attent-li">
							<image src="../../static/imgs/del/del.png" mode=""></image>
							<view class="name">
								夏天
							</view>
							<view class="attent-btn">
								已关注
							</view>
						</view>
						<view class="attent-li">
							<image src="../../static/imgs/del/del.png" mode=""></image>
							<view class="name">
								夏天
							</view>
							<view class="attent-btn">
								已关注
							</view>
						</view>
						<view class="attent-li">
							<image src="../../static/imgs/del/del.png" mode=""></image>
							<view class="name">
								夏天
							</view>
							<view class="attent-btn">
								已关注
							</view>
						</view>
					</view>

				<!-- 	<view class="nocont">
						<image src="../../static/imgs/zanwujl.png" mode=""></image>
						<view class="text">
							暂无关注
						</view>
					</view> -->

				</view>
			</view>
		</view>
		<!-- 聊天 -->
		<view class="content" v-if="current==1">
			<view class="tabBox" :style="{'paddingTop':paddingTop+'px'}">
				<view class="tab">
					<u-tabs :list="chatTab" :show-bar='false' bg-color='#F2F2F7' :is-scroll="false" :current="chatCur"
						@change="chatChange" active-color='#333333' inactive-color='#999999' bar-width='60'
						bar-height='4'>
					</u-tabs>
				</view>
			</view>
			<!-- 聊天 -->
			<view class="chat" v-if="chatCur == 0">
				<view class="searchBox">
					<image src="../../static/imgs/sousuohui@3.png" mode=""></image>
					<input type="text" placeholder="搜索聊天记录" placeholder-style="color:#999999;font-size:28rpx"
						@confirm="serchChatMsg" @blur="serchChatMsg" />
				</view>
				<view class="addBox" @click="goPath('./details/apply-list',0)">
					<view class="left">
						<image src="../../static/imgs/quanxiantb.png" mode=""></image>
						<text>新朋友</text>
					</view>
					<view class="right" v-if="new_friend_tips > 0">
						<view class="box">
							{{new_friend_tips}}
						</view>
					</view>
				</view>
				<view class="uni-list" v-if="list.length">
					<uni-swipe-action>
						<uni-swipe-action-item class="uni-list-cell" v-for="(value,key) of list" :key="key"
							:right-options="swipeData(value,key)" :auto-close="false" @click="swipeAction">
							<view class="uni-media-list"
								@tap="goMessage(value.list_id,key,value.no_reader_num,value.chat_id)">
								<view class="uni-media-list-logo">
									<image :src="staticPhoto + value.photo_path + '?_=' + imgRan" :lazy-load="true"
										style="border-radius: 50%;" :data-index="key" @error="imageError" />
								</view>

								<view class="red_num" v-if="value.no_reader_num">
									<uni-badge :text="value.no_reader_num" type="error" />
								</view>

								<view class="uni-media-list-body">
									<view class="uni-media-list-text-top">
										<text
											style="color: #333333;font-size: 28rpx;">{{msgHandle(value.show_name+'',12)}}</text>
										<!-- <text
											style="display: inline-block;width: fit-content;height: 36rpx;background-color:rgba(250, 142, 139, 0.2);font-size: 20rpx;line-height: 36rpx;text-align: center;padding: 0 6rpx;margin-left: 10rpx;color: #FB4F4B;">城市合伙人</text> -->
										<!-- 	<text style="display: inline-block;width: fit-content;height: 36rpx;background-color:rgba(53, 135, 247, 0.2);font-size: 20rpx;line-height: 36rpx;text-align: center;padding: 0 6rpx;margin-left: 10rpx;color: #3587F7;">VIP</text>
							<text style="display: inline-block;width: fit-content;height: 36rpx;background-color:rgba(53, 232, 247, 0.2);font-size: 20rpx;line-height: 36rpx;text-align: center;padding: 0 6rpx;margin-left: 10rpx;color: #14B9B9;">会员</text> -->
										<text style="margin-left: auto;color: #8f8f94;font-size: 23upx;">
											{{timestampFormat(value.time)}}
										</text>
									</view>
									<view class="uni-media-list-text-bottom uni-ellipsis">{{value.last_msg+''}}</view>
								</view>

							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</view>

			<!-- 好友列表 -->
			<view class="friendBox" v-if="chatCur == 1">
				<view class="searchBox">
					<image src="../../static/imgs/sousuohui@3.png" mode=""></image>
					<input type="text" placeholder="搜索好友" placeholder-style="color:#999999;font-size:28rpx"
						@confirm="serchChatMsg" @blur="serchChatMsg" />
				</view>
				<view class="page">
					<scroll-view class="scrollList" scroll-y :scroll-into-view="scrollViewId"
						:style="{height:winHeight + 'px'}">
						<view class="uni-list">
							<block v-for="(list, key) in list_data" :key="key">
								<view class="uni-list-cell-divider" :id="list.letter">
									{{list.letter}}
								</view>
								<view class="uni-list-cell" hover-class="none"
									:class="list.data.length -1 == index ? 'uni-list-cell-last' : ''"
									v-for="(item,index) in list.data" :key="isKey(key,index)">
									<uni-swipe-action :options="[ {text: '备注'} ]" @tap="swipeAction(item.user_id + '')">
										<view class="uni-media-list" @tap="goMsg(item.user_id + '')">
											<view class="uni-media-list-logo">
												<image :src="photo(item.photo+'')" :lazy-load="true"
													style="border-radius: 10px;" />
											</view>
											<view class="uni-media-list-body">
												<view class="uni-list-cell-navigate">{{item.name}}</view>
											</view>
										</view>
									</uni-swipe-action>
								</view>
							</block>
						</view>
					</scroll-view>
					<!-- 	<view class="uni-indexed-list-bar" :class="touchmove ? 'active' : ''" @touchstart="touchStart"
						@touchmove.stop.prevent="touchMove" @touchend="touchEnd" @touchcancel="touchCancel">
						<text v-for="(list,key) in key_data" :key="key" class="uni-indexed-list-text"
							:class="touchmoveIndex == key ? 'active' : ''"
							:style="{height:itemHeight + 'px',lineHeight:itemHeight + 'px'}">
							{{list}}
						</text>
					</view> -->

					<view class="uni-indexed-list-alert" v-if="touchmove">
						{{key_data[touchmoveIndex]}}
					</view>
				</view>
			</view>

			<!-- 发现 -->
			<view class="find" v-if="chatCur == 2">
				<view class="find-ul">
					<view class="find-li">
						<view class="headIcon">
							<image src="../../static/imgs/del/del.png" mode=""></image>
						</view>
						<view class="content">
							<view class="name">
								叮当
							</view>
							<view class="text">
								水磨沟景区位于广元市朝天区，地处秦岭山脉 与大巴山脉之间，国家AAAA级旅游景区，森林 覆盖率82%，是名副其实的天然氧吧。
							</view>
							<view class="imgBox">
								<image class="img" src="../../static/imgs/del/del.png" mode=""></image>
							</view>
							<view class="dateBox">
								<view class="date">
									3分钟前
								</view>
								<view class="rightcomment">
									<view class="comment" v-if='isComment'>
										<view class="btncom">
											<u-icon name="heart" color="#FFFFFF" size="28"></u-icon>
											<text>取消</text>
										</view>
										<view class="btncom">
											<u-icon name="more-circle" color="#FFFFFF" size="28"></u-icon>
											<text>评论</text>
										</view>
									</view>
									<view class="more" @click="isComment=!isComment">
										<image src="../../static/imgs/pinglun.png" mode=""></image>
									</view>
								</view>
							</view>
							<view class="bottom">
								<view class="disLike">
									<view class="disLike-li">
										<u-icon name="heart" color="#2F61B4" size="28"></u-icon>
										<text>孙悟空</text>
									</view>
									<view class="disLike-li">
										<u-icon name="heart" color="#2F61B4" size="28"></u-icon>
										<text>孙悟空</text>
									</view>
									<view class="disLike-li">
										<u-icon name="heart" color="#2F61B4" size="28"></u-icon>
										<text>孙悟空</text>
									</view>
									<view class="tip">
										等人觉得很赞
									</view>
								</view>
								<view class="pingl">
									<view class="pingl-li">
										<view class="user">
											小胖：
										</view>
										<view class="text">
											哇哦，这也太好看了吧!!!哇哦，这也太好看了吧!!!
										</view>
									</view>
									<view class="pingl-li">
										<view class="user">
											小胖：
										</view>
										<view class="text">
											哇哦，这也太好看了吧!!!
										</view>
									</view>
									<view class="pingl-li">
										<view class="user">
											小胖：
										</view>
										<view class="text">
											哇哦，这也太好看了吧!!!
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="find-li">
						<view class="headIcon">
							<image src="../../static/imgs/del/del.png" mode=""></image>
						</view>
						<view class="content">
							<view class="name">
								叮当
							</view>
							<view class="text">
								水磨沟景区位于广元市朝天区，地处秦岭山脉 与大巴山脉之间，国家AAAA级旅游景区，森林 覆盖率82%，是名副其实的天然氧吧。
							</view>
							<view class="imgBox">
								<image class="img" src="../../static/imgs/del/del.png" mode=""></image>
								<image class="img" src="../../static/imgs/del/del.png" mode=""></image>
								<image class="img" src="../../static/imgs/del/del.png" mode=""></image>
								<image class="img" src="../../static/imgs/del/del.png" mode=""></image>
								<image class="img" src="../../static/imgs/del/del.png" mode=""></image>
							</view>
							<view class="dateBox">
								<view class="date">
									3分钟前
								</view>
								<view class="rightcomment">
									<view class="comment" v-if='isComment'>
										<view class="btncom">
											<u-icon name="heart" color="#FFFFFF" size="28"></u-icon>
											<!-- <text>取消</text> -->
											<text>赞</text>
										</view>
										<view class="btncom">
											<u-icon name="more-circle" color="#FFFFFF" size="28"></u-icon>
											<text>评论</text>
										</view>
									</view>
									<view class="more" @click="isComment=!isComment">
										<image src="../../static/imgs/pinglun.png" mode=""></image>
									</view>
								</view>
							</view>
							<view class="bottom">
								<view class="disLike">
									<view class="disLike-li">
										<u-icon name="heart" color="#2F61B4" size="28"></u-icon>
										<text>孙悟空</text>
									</view>
									<view class="disLike-li">
										<u-icon name="heart" color="#2F61B4" size="28"></u-icon>
										<text>孙悟空</text>
									</view>
									<view class="disLike-li">
										<u-icon name="heart" color="#2F61B4" size="28"></u-icon>
										<text>孙悟空</text>
									</view>
									<view class="tip">
										等人觉得很赞
									</view>
								</view>
								<view class="pingl">
									<view class="pingl-li">
										<view class="user">
											小胖：
										</view>
										<view class="text">
											哇哦，这也太好看了吧!!!哇哦，这也太好看了吧!!!
										</view>
									</view>
									<view class="pingl-li">
										<view class="user">
											小胖：
										</view>
										<view class="text">
											哇哦，这也太好看了吧!!!
										</view>
									</view>
									<view class="pingl-li">
										<view class="user">
											小胖：
										</view>
										<view class="text">
											哇哦，这也太好看了吧!!!
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 我的 -->
			<view class="person" v-if="chatCur == 3">
				<view class="year-li">
					<view class="yaer">
						2021年
					</view>
					<view class="month-ul">
						<view class="month-li">
							<view class="date">
								<text style="font-size: 44rpx;font-weight: bold;">03</text><text
									style="font-size: 28rpx;">5月</text>
							</view>
							<view class="img">
								<image src="../../static/imgs/del/del.png" mode=""></image>
							</view>
							<view class="cont">
								今天长这样今天长这样今天长这样
								今天长这样今天长这样今天长这样
							</view>
						</view>
						<view class="month-li">
							<view class="date">
								<text style="font-size: 44rpx;font-weight: bold;">01</text><text
									style="font-size: 28rpx;">4月</text>
							</view>
							<view class="img">
								<image src="../../static/imgs/del/del.png" mode=""></image>
							</view>
							<view class="cont">
								今天长这样今天长这样今天长这样
								今天长这样今天长这样今天长这样
							</view>
						</view>
					</view>
				</view>
				<view class="year-li">
					<view class="yaer">
						2020年
					</view>
					<view class="month-ul">
						<view class="month-li">
							<view class="date">
								<text style="font-size: 44rpx;font-weight: bold;">03</text><text
									style="font-size: 28rpx;">5月</text>
							</view>
							<view class="img">
								<image src="../../static/imgs/del/del.png" mode=""></image>
							</view>
							<view class="cont">
								今天长这样今天长这样今天长这样
								今天长这样今天长这样今天长这样
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 活动 -->
		<view class="activity" v-if="current == 2" :style="{'paddingTop':paddingTop+'px'}">
			<view class="tab">
				<view class="tabBox">
					<u-tabs :list="actTab" :show-bar='false' bg-color='#F2F2F7' :is-scroll="false" :current="actCur"
						@change="actChange" active-color='#333333' inactive-color='#999999' bar-width='60'
						bar-height='4'></u-tabs>
				</view>
				<!-- <view class="laction">
					<u-icon name="map-fill" color="#3587F7" size="32"></u-icon><text>深圳市</text>
				</view> -->
			</view>
			<view class="activity-ul" v-if="actCur == 0 && invielist.length">
				<view class="activity-li" v-for="(act,actx) in invielist" :key='actx'>
					<view class="banner">
						<view class="text">
							{{act.title}}
						</view>
						<view class="btn" @click="navTo('./activity/activity?id='+item.groupon_id)">
							去报名
						</view>
					</view>
					<view class="num">
						<view class="left">
							计划{{act.base_num}}人
						</view>
						<view class="right">
							已邀请<text>{{act.people_num}}</text>人<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.4)"
								size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="activity-ul" v-if="actCur == 1 && invielist.length">
				<view class="activity-li" @click="navTo('./activity/activity?id='+item.groupon_id)"
					v-for="(act,actx) in invielist" :key='actx' v-if="act.base_num==act.people_num">
					<view class="banner">
						<view class="text">
							{{act.title}}
						</view>
					</view>
					<view class="num">
						<view class="left">
							计划{{act.base_num}}人
						</view>
						<view class="right">
							已邀请<text>{{act.people_num}}</text>人<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.4)"
								size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="noCont" style="padding-top: 240rpx;">
				<u-empty text="暂无活动" mode="list"></u-empty>
			</view>
		</view>
		<!-- 消息 -->
		<view class="message" v-if="current == 3" :style="{'paddingTop':paddingTop+'px'}">
			<view class="message-li" @click="navTo('./newsDetail/newsDetail')">
				<image src="../../static/imgs/xitongts.png" mode=""></image>
				<view class="cont">
					<view class="top">
						<view class="title">
							系统推送
						</view>
						<view class="time">
							12:34
						</view>
					</view>
					<view class="bottom">
						旅游市场迎来新年“开门红”冰旅游市场迎来新年“开门红”冰旅游市场
					</view>
				</view>
			</view>
			<view class="message-li" @click="navTo('./newsDetail/newsDetail')">
				<image src="../../static/imgs/xitongts.png" mode=""></image>
				<view class="cont">
					<view class="top">
						<view class="title">
							系统推送
						</view>
						<view class="time">
							12:34
						</view>
					</view>
					<view class="bottom">
						旅游市场迎来新年“开门红”冰旅游市场迎来新年“开门红”冰旅游市场
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import _get from '@/common/_get';
	import _hook from '@/common/_hook';
	import _action from '@/common/_action';
	import _data from '@/common/_data';
	import _page from '@/common/common';
	import _mixins from "@/common/_mixins";
	import myRequest from '@/api/index.js'
	import uniIcon from '@/components/uni-icons/uni-icons.vue';
	import uniBadge from '@/components/uni-badge/uni-badge.vue';
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {
			uniIcon,
			uniBadge,
			uniSwipeAction,
			uniSwipeActionItem,
		},
		data() {
			return {
				paddingTop: '',
				new_friend_tips: 0,
				isComment: false,
				current: 0,
				tabList: [{
						name: '发现'
					},
					{
						name: '聊天',
					},
					{
						name: '活动',
					},
					{
						name: '消息',
					},
				],
				barStyle: {
					backgroundColor: '#3587F7'
				},
				dynamicCur: 0,
				dynamicTab: [{
						name: '推荐'
					},
					{
						name: '视频'
					},
					{
						name: '图文'
					},
					{
						name: '我的关注'
					}
				],
				dynamicRecom: [], //推荐列表
				dynamicVideo: [], // 视频列表
				dynamicImg: [], // 图文列表
				chatCur: 0,
				chatTab: [{
						name: '聊天'
					},
					{
						name: '好友'
					},
					{
						name: '发现'
					},
					{
						name: '我的'
					}
				],
				actTab: [{
					name: '预告'
				}, {
					name: '已完成'
				}],
				actCur: 0,
				page: '1',
				scrollNum: '',
				status: 0,
				list: [],
				search_list: [],
				list_index: '',
				action_menu: false,
				action_menu_num: 0,
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				form: {
					username: 'zhangxiaozhi',
					password: '123456',
					client_id: ''
				},
				list_data: [],
				new_group_tips: 0,
				title: 'grid',
				touchmove: false,
				touchmoveIndex: -1,
				itemHeight: 0,
				winHeight: 0,
				scrollViewId: "A",
				titleHeight: 0,
				keyword: '',
				key_data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U',
					'V', 'W', 'X', 'Y', 'Z'
				],
				videoCtx: '',
				invielist: []
			}
		},

		mounted() {
			let that = this
			const query = uni.createSelectorQuery().in(this);
			query.select('#head').boundingClientRect(data => {
				that.paddingTop = data.height
			}).exec();

		},
		onLoad() {
			this.getArticle()
			let winHeight = uni.getSystemInfoSync().windowHeight;
			this.itemHeight = winHeight / 26;
			this.winHeight = winHeight;
			this.login()
		},
		onUnload() {
			uni.$off('data_chat_list');
		},
		onPullDownRefresh() {
			_get.getChatList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 300);
		},
		onReachBottom() {
			let page = Number(this.page) + 1
			this.page = page.toString()
			if (this.dynamicCur == 0) {
				this.getArticle()
			}
			if (this.dynamicCur == 1) {
				this.getArticle(2)
			}
			if (this.dynamicCur == 2) {
				this.getArticle(1)
			}
		},
		onShow() {
			this.loadId()
			let _this = this
			this.login()
			let tips_num = _data.data('new_friend_tips_num')
			/** 监听新的朋友提示 */
			uni.$on('data_new_friend_tips', function(data) {
				_this.new_friend_tips = data;
				console.log(_this.new_friend_tips);
			});
			_this.new_friend_tips = tips_num;
		},
		computed: {
			showActionMenu() {
				return this.action_menu;
			},
			staticPhoto() {
				return _data.staticPhoto();
			},
			imgRan() {
				return Math.random();
			},
		},
		methods: {

			async loadId() {
				let userId = this.$store.state.userInfo.user_id
				let chatId = uni.getStorageSync('chatId')
				let res = await myRequest.getChatId({
					user_id: userId,
					chat_user_id: chatId
				})
			},
			goPath(path, type) {
				switch (type) {
					case 0:
						path += '?action=' + (this.new_friend_tips ? 1 : 0)
						this.new_friend_tips = 0;
						_data.data('new_friend_tips_num', 0);
						_action.setStatusTips();
						break;
					case 1:
						path += '?action=' + (this.new_group_tips ? 1 : 0);
						this.new_group_tips = 0;
						_data.data('new_group_tips_num', 0);
						_action.setStatusTips();
						break;
					default:
						break;
				}
				if (path) {
					uni.navigateTo({
						url: path,
					});
				}
			},
			// 我的活动
			async myInvitation() {
				let res = await myRequest.getMyinvit({
					page: this.page
				})
				if (res.status) {
					this.invielist = res.data
				}
			},
			// 获取帖子
			async getArticle(catId) {
				let {
					page,
				} = this
				let res = await myRequest.getComment({
					page: page,
					category_type: '1',
					cat_id: catId ? catId.toString() : ''
				})
				if (res.status) {
					if (!catId) {
						this.dynamicRecom = [...this.dynamicRecom, ...res.data]
					}
					if (catId == '1') {
						this.dynamicImg = [...this.dynamicImg, ...res.data]
					}
					if (catId == '2') {
						this.dynamicVideo = [...this.dynamicVideo, ...res.data]
					}
				}
			},
			actChange(index) {
				this.actCur = index
			},
			dynaChange(index) {
				this.page = '1'
				this.dynamicCur = index
				this.$refs.tjWaterfall.clear()
				this.$refs.spWaterfall.clear()
				this.$refs.twWaterfall.clear()
				if (this.dynamicCur == 0) {
					this.getArticle()
				}
				if (this.dynamicCur == 1) {
					this.getArticle(2)
				}
				if (this.dynamicCur == 2) {
					this.getArticle(1)
				}
			},
			changeFn(index) {
				this.current = index
				if (this.current == 2) {
					this.myInvitation()
				}
			},
			serchChatMsg(e) {
				let chat_msg = e.detail.value.trim();
				let _this = this;
				_this.keyword = chat_msg;
				if (!chat_msg) {
					_this.list = _this.search_list;
					return true;
				}
				_get.serchChatMsg({
					'chat_msg': chat_msg
				}, function(data) {
					_this.list = data;
				})
			},
			isKey(key, index) {
				return key + '' + index;
			},
			touchStart(e) {
				this.touchmove = true;
				let pageY = e.touches[0].pageY;
				let index = Math.floor((pageY - this.titleHeight) / this.itemHeight);
				console.log("index", index)
				let item = this.list_data[index];
				// console.log("list_data", this.list_data)
				// console.log("item", item)
				if (item) {
					this.scrollViewId = item.letter;
				}

				this.touchmoveIndex = index;
			},
			touchMove(e) {
				let pageY = e.touches[0].pageY;
				let index = Math.floor((pageY - this.titleHeight) / this.itemHeight);
				let item = this.list_data[index];
				if (item) {
					this.scrollViewId = item.letter;
					this.touchmoveIndex = index;
				}
			},
			touchEnd() {
				this.touchmove = false;
				//this.touchmoveIndex = -1;
			},
			touchCancel() {
				this.touchmove = false;
				//this.touchmoveIndex = -1;
			},
			photo(path) {
				return this.staticPhoto + path;
			},
			chatChange(index) {
				this.chatCur = index
				this.scrollNum = 375
				if (index == 0) {
					this.onShowHandle()
				}
				if (index == 1) {
					this.onFriendShowHandle()
				}
			},
			login() {
				let _this = this
				this.form.client_id = _data.localData('client_id');
				if (_data.localData('IMtoken')) {
					return _this.onShowHandle()
				}
				var token = uni.getStorageSync('token')
				console.log(token)
				uni.request({
					url: 'http://im.loveworldzh.com/im/in/chatToken',
					method: 'POST',
					data: {
						token
					},
					success(res) {
						console.log(res)
						try {
							_data.localData('IMtoken', res.data.data.token)
						} catch (e) {
							uni.showModal({
								content: '本地存储数据不可用!',
							});
							uni.hideLoading()
							return false;
						}
						console.log('连接websocket')
						//登陆上去之后重新获取数据刷新页面
						_mixins.methods.$socketSend({
							action: 'checkToken',
							data: res.data.data.token,
						}, function() {
							_this.onShowHandle()
						});
					}
				})

				// _this.$httpSend({
				// 	path: '/im/in/login',
				// 	data: _this.form,
				// 	success: (data) => {
				// 		console.log('sucess', data.token)
				// 		try {
				// 			_data.localData('IMtoken', data.token)
				// 		} catch (e) {
				// 			uni.showModal({
				// 				content: '本地存储数据不可用!',
				// 			});
				// 			uni.hideLoading()
				// 			return false;
				// 		}
				// 		console.log('连接websocket')
				// 		//登陆上去之后重新获取数据刷新页面
				// 		_mixins.methods.$socketSend({
				// 			action: 'checkToken',
				// 			data: data.token,
				// 		}, function() {
				// 			_this.onShowHandle()
				// 		});

				// 	}
				// });
			},
			// 聊天记录
			onShowHandle() {
				_hook.routeTabBarHook();
				uni.$off('data_chat_list');
				let _this = this,
					chat_list = _data.localData('chat_list');

				/** 监听最新数据 */
				uni.$on('data_chat_list', function(data) {
					_this.list = data;
					_this.search_list = _this.list;
					// console.log("接收到新数据....");
				});
				/** 加载本地缓存数据，让页面秒速渲染出来 */
				if (chat_list) {
					_this.list = chat_list;
				} else {
					_get.getChatList();
				}
				_this.action_menu = false;

			},
			// 好友列表
			onFriendShowHandle() {
				let _this = this,
					frien_list = _data.localData('frien_list')
				/** 监听最新数据 */
				uni.$on('data_friend_list', function(data) {
					_this.list_data = data;
					_this.search_list = data;
				});
				/** 加载本地缓存数据，让页面秒速渲染出来 */
				if (frien_list) {
					_this.list_data = frien_list;
				} else {
					_get.getFriendList();
				}
			},
			searchFriends(keyword) {
				this.keyword = keyword.trim();
				let _this = this;
				if (!keyword) {
					console.log(_this.search_list)
					_this.list_data = _this.search_list;
					return true;
				}
				_get.searchFriends({
					'keyword': keyword
				}, function(data) {
					_this.list_data = data.data;
				})
			},

			imageError(e) {
				let index = e.currentTarget.dataset.index
				//替换index对应的图片
				this.list[index].photo_path = '/default_photo_path.png';
			},
			msgHandle(msg, num) {
				if (num == undefined) num = 16;
				if (!msg) return '';
				msg = msg.replace(/&lt;/g, '<');
				return msg.length > num ? msg.substr(0, num) + '...' : msg;
			},
			timestampFormat(time) {
				return _action.timestampFormat(time);
			},
			goAction(type) {
				let path = '';
				switch (type) {
					case 0:
						path = '../friend/index_list?list_id=0';
						break;
					case 1:
						path = '../friend/add';
						break;
					case 2:
						path = '../my/store';
						break;
					default:
						return;
						break;
				}
				uni.navigateTo({
					url: path,
					animationType: 'slide-in-bottom',
				});
			},
			actionMain() {
				this.action_menu = !this.action_menu;
				this.action_menu_num++;
			},
			openedAction(key) {
				this.list_index = key;
			},
			swipeAction(e) {
				let list_index = e.content.number
				let _this = this,
					list_id = _this.list[list_index].list_id;
				if (!list_id) {
					return;
				}
				let top = _this.list[list_index].top;
				// console.log("top", top)
				let value = top == 1 ? 0 : 1;
				console.log("value", value)
				switch (e.index) {
					case 0:
						//置顶 /取消置顶
						_this.$httpSend({
							path: '/im/message/chatTop ',
							data: {
								list_id: list_id,
								value: value
							},
							success: () => {
								_get.getChatList();
							}
						});
						break;
					case 1:
						/** 删除这条对话 */
						_this.$httpSend({
							path: '/im/chat/deleteChat',
							data: {
								list_id,
							},
							success: (data) => {
								_get.getChatList();
							}
						});
						break;
					default:
						break;
				}
			},
			swipeData(value, index) {
				return [{
						text: value.top == 1 ? '取消置顶' : '置顶',
						number: index,
						style: {

						},
					},
					{
						text: '删除',
						number: index,
						style: {
							backgroundColor: 'rgb(255,58,49)',
						}
					}
				];
			},
			goMessage(list_id, key, no_reader_num, chat_id) {
				if (no_reader_num > 0) {
					_get.getChatData({
						send_data: {
							list_id: list_id,
							time: 0,
							is_up: 1,
						},
						is_action_data: 1,
					});
					this.list[key].no_reader_num = 0;
					_data.localData('chat_list', this.list);
					_action.updataNoReader(list_id);
					_action.setStatusTips();
				}
				_data.localData('message_list_id', list_id);
				// './message?list_id=' + list_id + "&chat_id="+chat_id,
				uni.navigateTo({
					url: './message?list_id=' + list_id
				});
			},
			goScanCode() {
				let _this = this;
				_this.action_menu = false;
				_page.scanCode();
			},

			goMsg(user_id) {
				// if (this.my.user_id == _data.data('user_info').id) {
				// 	uni.showToast({
				// 		title: '不能给自己发消息',
				// 		duration: 2000,
				// 		icon: 'none',
				// 	});
				// 	return;
				// }
				this.$httpSend({
					path: '/im/message/getListId',
					data: {
						user_id: user_id
					},
					success(data) {
						uni.navigateTo({
							url: './message?list_id=' + data.list_id,
						});
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		},
		onNavigationBarButtonTap(e) {
			this.action_menu = !this.action_menu;
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/chat/animate.css';

	.head {
		width: 100%;
		height: auto;
		position: fixed;
		top: 0;
		z-index: 999;

		.status-bar {
			width: 100%;
			height: var(--status-bar-height);
			background-color: #FFFFFF;
		}

		.tab-bar {
			width: 100%;
			height: 88rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 20rpx;

			.tabsBox {
				width: 70%;
			}

			.issue {
				width: 92rpx;
				height: 56rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.content {
		.tabBox {
			width: 100%;
			height: auto;
			position: sticky;
			background-color: #F2F2F7;
			top: 0;
			z-index: 99;

			.tab {
				width: 70%;
			}
		}

		.chat {
			padding: 0 28rpx;

			.searchBox {
				width: 694rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding-left: 20rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				input {
					text-indent: 12rpx;
					color: #999999;
					font-size: 28rpx;
				}
			}

			.chatBox {
				margin-top: 28rpx;
				width: 694rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.chatBox-li {
					height: 120rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;

					.img {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
					}

					.info {
						margin-left: 20rpx;
						width: 70%;

						.name {
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 600;
							color: #333333;
						}

						.msg {
							margin-top: 6rpx;
							width: 80%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #999999;
						}
					}

					.time {
						margin-left: auto;
						font-size: 24rpx;
						font-family: Segoe UI;
						line-height: 14px;
						color: rgba(153, 153, 153, 0.5);
					}
				}
			}
		}

		.container {

			.dynamicRecom-li {
				width: 348rpx;
				height: auto;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				padding-bottom: 16rpx;
				margin-bottom: 20rpx;

				image {
					width: 348rpx;
					height: 460rpx;
				}

				.video {
					position: relative;
					z-index: 10;

					.poster {
						width: 348rpx;
						height: 460rpx;
						background-color: #333333;
					}

					.play {
						width: 44rpx;
						height: 44rpx;
						position: absolute;
						top: 24rpx;
						right: 24rpx;
					}
				}

				.title {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					padding: 0 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical
				}

				.userBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 10rpx;
					margin-top: 16rpx;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
						}

						text {
							margin-left: 6rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 300;
							color: #666666;
						}
					}

					.right {
						text {
							margin-left: 6rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 300;
							color: #666666;
						}
					}
				}
			}


			.searchBox {
				width: 710rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				margin: 0 auto;

				input {
					width: 100%;
					height: 100%;
					text-indent: 24rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.attent {
				width: 710rpx;
				height: auto;
				margin: 32rpx auto 0;
				background-color: #FFFFFF;
				padding: 0 20rpx;
				border-radius: 16rpx;

				.lable {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					padding: 20rpx 0;
				}

				.attent-ul {
					.attent-li {
						width: 100%;
						height: 120rpx;
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #F2F2F7;

						&:last-child {
							border-bottom: none;
						}

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}

						.name {
							margin-left: 20rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 600;
							color: #333333;
						}

						.attent-btn {
							margin-left: auto;
							width: 132rpx;
							height: 52rpx;
							border: 2rpx solid rgba(153, 153, 153, 0.5019607843137255);
							border-radius: 40rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 52rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.friendBox {
		border-radius: 16rpx;

		.searchBox {
			width: 694rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			margin: 0 auto;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			input {
				text-indent: 12rpx;
				color: #999999;
				font-size: 28rpx;
			}
		}

		.tabs {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			height: 80rpx;

			.tabs-item {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #999999;
				margin-right: 48rpx;
			}
		}

		.friendBox-li {
			height: 120rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;

			.img {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}

			.info {
				margin-left: 20rpx;
				width: 70%;

				.name {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 600;
					color: #333333;
				}

				.msg {
					margin-top: 6rpx;
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #999999;
				}
			}

			.msgIcon {
				margin-left: auto;
			}
		}
	}

	.find {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;

		.find-ul {
			padding: 0 20rpx;

			.find-li {
				width: 100%;
				height: auto;
				border-bottom: 2rpx solid #F2F2F7;
				display: flex;
				padding-top: 20rpx;
				padding-bottom: 40rpx;

				.headIcon {
					image {
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
					}
				}

				.content {
					margin-left: 20rpx;

					.name {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2F61B4;
					}

					.text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.imgBox {
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;

						.img {
							&:only-child {
								width: 224rpx;
								height: 260rpx;
							}

							width: 160rpx;
							height: 160rpx;
							margin-top: 10rpx;

							&:nth-child(3n-1) {
								margin: 10rpx 10rpx 0;
							}
						}
					}

					.dateBox {
						height: 80rpx;
						display: flex;
						align-items: center;

						.date {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
						}

						.rightcomment {
							display: flex;
							align-items: center;
							margin-left: auto;

							.comment {
								width: 260rpx;
								height: 56rpx;
								background: rgba(0, 0, 0, 0.7);
								border-radius: 8rpx;
								display: flex;
								align-items: center;

								.btncom {
									flex: 1;
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
									text-align: center;
								}
							}

							.more {
								margin-right: 6rpx;
								margin-left: auto;
								width: 58rpx;
								height: 36rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}

					}

					.bottom {
						.disLike {
							width: 614rpx;
							height: 48rpx;
							background: #F2F2F7;
							border-radius: 4rpx;
							padding: 0 20rpx;
							display: flex;
							align-items: center;
							// border-bottom: 2rpx solid #2F61B4;

							.disLike-li {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #2F61B4;
								margin-right: 16rpx;
							}

							.tip {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #2F61B4;
							}
						}

						.pingl {
							width: 614rpx;
							height: auto;
							background: #F2F2F7;
							border-radius: 6rpx;
							padding: 0 10rpx;

							.pingl-li {
								width: 100%;
								display: flex;

								.user {
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #2F61B4;
								}

								.text {
									width: 84%;
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #333333;
								}
							}
						}
					}
				}
			}
		}
	}

	.person {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 0 20rpx 0 26rpx;

		.year-li {
			padding: 18rpx 0;

			.yaer {
				font-size: 44rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.month-ul {
				.month-li {
					display: flex;
					justify-content: space-between;
					margin: 30rpx 0;

					.date {
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.img {
						width: 160rpx;
						height: 180rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.cont {
						width: 60%;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
	}

	.message {
		padding: 0 20rpx;

		.message-li {
			width: 710rpx;
			height: 148rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			margin-top: 20rpx;

			image {
				width: 76rpx;
				height: 76rpx;
			}

			.cont {
				width: 85%;
				margin-left: auto;

				.top {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					.time {
						margin-left: auto;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #999999;
					}

					.title {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: bold;
						color: #333333;
					}
				}

				.bottom {
					width: 100%;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.activity {
		.tab {
			width: 100%;
			height: 100rpx;
			background-color: #F2F2F7;
			display: flex;
			align-items: center;

			.tabBox {
				width: 36%;
			}

			.laction {
				margin-left: auto;
				height: 100rpx;
				line-height: 100rpx;
				padding-right: 30rpx;

				text {
					margin-left: 6rpx;
				}
			}
		}

		.activity-ul {
			// margin-top: -142rpx;

			.activity-li {
				margin: 0 auto 20rpx;
				width: 710rpx;
				height: auto;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0px 16rpx 20rpx rgba(0, 0, 0, 0.05);

				.banner {
					width: 710rpx;
					height: 280rpx;
					@include bgi('../../static/imgs/del/wodeyybgi.png');
					padding: 44rpx 44rpx 0 28rpx;

					.text {
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
					}

					.btn {
						margin-top: 28rpx;
						width: 176rpx;
						height: 68rpx;
						background: rgba(0, 0, 0, 0.32);
						border-radius: 40rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: rgba(255, 255, 255, 0.8);
						line-height: 68rpx;
						text-align: center;
					}
				}

				.num {
					width: 100%;
					height: 120rpx;
					background-color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 16rpx;

					.left {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.right {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;

						text {
							color: #FB4F4B;
						}
					}
				}
			}
		}
	}


	/*聊天窗口*/
	.uni-list {
		width: 694rpx;
		margin: 10rpx auto 0;
		border-radius: 16rpx;
	}

	.uni-list-cell {
		overflow: hidden;
		width: 710rpx !important;
	}

	.uni-media-list-logo {
		height: 76upx;
		width: 76upx;
		margin-left: 0rpx;
		margin-right: 8rpx;

	}

	.search .content {
		padding-left: 20upx;
		height: 60upx;
	}

	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 5px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
	}

	.red_num {
		position: absolute;
		height: 34upx;
		top: 7upx;
		left: 120upx;
		font-size: 23upx !important;
	}

	/**
	.uni-media-list-body {
		height: auto;
	}
	*/

	.uni-media-list-text-top {
		display: flex;
		align-items: center;
		justify-content: flex-start;

	}

	.uni-swipe-action,
	.uni-swipe,
	.uni-view,
	.uni-media-list {
		width: 710upx !important;
		height: 140rpx;
		border-bottom: 2rpx solid #F2F2F7;
	}

	.action_main {
		position: fixed;
		top: 55px;
		/* #ifndef H5 */
		top: 15px;
		/* #endif */
		width: 750upx;
		height: 1080upx;
		z-index: 10000;
	}

	.action_base {
		position: absolute;
		right: 15upx;
		width: 300upx;
		top: -15upx;
		background: #36363d;
		border-radius: 10upx;
	}

	.sj {
		position: fixed;
		top: -28upx;
		right: 26upx;

		/* #ifdef APP-PLUS */
		top: 3upx;
		right: 20upx;
		/* #endif */

		width: 0;
		height: 0;
		border-left: 20upx solid transparent;
		border-right: 20upx solid transparent;
		border-bottom: 20upx solid #36363d;
	}

	.action_item {
		color: #e5e5e5;
		height: 100upx;
		line-height: 100upx;
		margin-left: 45upx;
		border-bottom: 1px solid #3e3e3e;
	}

	.action_icon {
		width: 45upx;
		height: 45upx;
		display: inline-block;
		vertical-align: middle;
	}

	.action_item:last-child {
		border: none;
	}

	.action_item_text {
		font-size: 30upx;
	}

	/*好友列表*/
	.page {
		display: flex;
		flex-direction: row;
	}

	.search .content {
		padding-left: 20rpx;
		height: 60rpx;
	}

	.scrollList {
		flex: 1;
		height: 100vh;
	}

	.uni-indexed-list-bar {
		width: 40rpx;
		height: 100%;
		background-color: rgba(255, 255, 255, 0);
		display: flex;
		flex-direction: column;
		position: fixed;
		right: 0;
		z-index: 9999;
		top: var(--status-bar-height);
		align-items: center;
		justify-content: center;
	}

	.uni-indexed-list-text {
		font-size: 22rpx;
		text-align: center;
	}

	.uni-indexed-list-bar.active .uni-indexed-list-text {
		color: #333;
	}

	.uni-indexed-list-text.active,
	.uni-indexed-list-bar.active .uni-indexed-list-text.active {
		color: #02b300;
	}

	.uni-indexed-list-alert {
		position: absolute;
		z-index: 20;
		width: 160rpx;
		height: 160rpx;
		left: 50%;
		top: 50%;
		margin-left: -80rpx;
		margin-top: -80rpx;
		border-radius: 80rpx;
		text-align: center;
		line-height: 160rpx;
		font-size: 70rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 5px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
	}

	.uni-list-cell-navigate {
		padding: 0;
	}

	.uni-media-list-body {
		height: auto;
		padding-right: 10rpx;
	}

	.uni-media-list image {
		border-radius: 10px;
	}

	.uni-swipe-action {
		width: 710rpx !important;
	}

	.btm_border {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.btm_border::after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 115rpx;
		height: 1px;
		content: "";
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #e7e6ef;
	}

	.img-icon {
		width: 85rpx;
		height: 85rpx;
		border-radius: 10rpx;
	}

	.uni-media-list-logo {
		height: 85rpx;
		width: 85rpx;
		margin-right: 20rpx;
	}

	.red_num {
		background-color: #f43530;
		width: 35rpx;
		border-radius: 18rpx;
		text-align: center;
		height: 35rpx;
		line-height: 35rpx;
		color: #ffffff;
		font-size: 23rpx !important;
	}

	.addBox {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #FFFFFF;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		margin-top: 10rpx;

		.left {
			display: flex;
			align-items: center;

			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 10rpx;
			}
		}

		.right {
			.box {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background-color: #f43530;
				text-align: center;
				line-height: 40rpx;
				color: #FFFFFF;
				font-size: 24rpx;
			}

		}
	}

	.nocont {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 312rpx;
			height: 234rpx;
		}

		.text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	/deep/ #u-left-column {
		margin-left: 16rpx;
	}
</style>
